<template>
  <div class="login-wrap">
    <div class="register-form">
      <el-form ref="temp" :rules="rules" :model="temp" label-width="80px">
        <h2 class="login-title"></h2>
        <el-form-item label="部门" prop="deptId">
          <UnitSelect @e-unitData="setUnitId" :selectType="1" :level="2" />
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="temp.account"
            @blur="handleBlur()"
            placeholder="请输入登录账号，推荐使用邮箱或手机号注册账号"
          ></el-input>
          <div class="accountHint">
            <span
              v-show="accountAali == 0"
              class="el-icon-question tpic color-info"
            ></span>
            <span
              v-show="accountAali == 1"
              class="el-icon-success tpic color-success"
            ></span>
            <span
              v-show="accountAali == 2"
              class="el-icon-error tpic color-danger"
            ></span>
          </div>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="temp.userName"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="likeName">
          <el-input v-model="temp.likeName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="temp.password"
            show-password
            :placeholder="passwordTips"
            autocomplete="new-password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="temp.confirmPassword"
            show-password
            :placeholder="passwordTips2"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="学历" prop="education">
          
          <el-select v-model="temp.education" placeholder="请选择学历">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="电话" prop="phone">
          <el-input v-model="temp.phone" placeholder="请输入电话"></el-input>
        </el-form-item> -->
        <el-form-item label="性别" prop="sex">
          <template>
            <el-radio v-model="temp.sex" label="1">男</el-radio>
            <el-radio v-model="temp.sex" label="2">女</el-radio>
          </template>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button class="regBut" @click="register('temp')">注册</el-button>
          <!-- <el-button style="background: #f8d177" @click="login('form')"
            >登录</el-button
          > -->
          <el-button @click="routeToByName('login')">去登录</el-button>
          <!--  <p>
            <a @click="login('form')" style="color: #ffffff"
              >已注册，请登录！</a
            >
          </p> -->
        </el-form-item>
        <!-- <el-form-item style="text-align: center">
          <a @click="login('form')">已注册，请登录！</a>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { setSession, getSession } from '@/utils/session'
import { tbUserVali } from '@/api/admin/user/user-manage.js'
import { sign } from '@/api/http'
// import { tbDictDefinitionQueryConstantStrList } from "@/api/dictionary.js";
export default {
  name: 'login',
  components: {
    UnitSelect: () => import('@/components/unitSelect'),
  },
  data() {
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      //这样才能在回调里通过箭头函数获取到this对象
      if (value != this.temp.password) {
        callback(new Error('与密码不一致'))
      } else {
        //校验通过
        callback()
      }
    }
    return {
      time: 0,
      userinfo: {},
      accountAali: 0,
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '请输入2~30个字符',
            trigger: 'blur',
          },
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,
            max: 8,
            message: '请输入2~8位汉字、字母或数字',
            trigger: 'blur',
            // validator: function (rule, value, callback) {
            //   //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
            //   if (/^[\u4e00-\u9fa5]{2,8}$/.test(value) == false) {
            //     callback(new Error("请输入2~8个汉字"));
            //   } else {
            //     //校验通过
            //     callback();
            //   }
            // },
            // trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: '请输入6~16个字符',
            trigger: 'blur',
            min: 6,
            max: 16,
          },
          {
            validator: function (rule, value, callback) {
              //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if ((value + '').length < 6) {
                callback(new Error('请输入6~16个字符'))
              } else {
                //校验通过
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          {
            validator: pwdAgainCheck,
            trigger: 'blur',
          },
        ],
        deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            type: 'number',
            validator: function (rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error('请输入11位手机号'))
              } else {
                //校验通过
                callback()
              }
            },
            message: '请输入11位有效手机号码',
            trigger: ['blur', 'change'],
          },
        ],
      },
      options: [
        {
          value: '1',
          label: '博士',
        },
        {
          value: '2',
          label: '硕士',
        },
        {
          value: '3',
          label: '本科',
        },
        {
          value: '4',
          label: '大专',
        },
        {
          value: '5',
          label: '高中',
        },
      ],
      // webInformationData: {},
      logoImgUrl: '',
      companyTableData: [],
      treeName: '',
      passwordTips: '请输入密码',
      passwordTips2: '请输入确认密码',
      treeFlag: false,
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      temp: {
        account: '',
        password: '',
        userName: '',
        isLeader: '1',
        education: '',
        phone: '',
        sex: '1',
        deptId: '',
        del: '1', //1，可以登录，2不可用，需审核
        definitionCode: '11',
        type: 40, //学员
        level: 1,
      },
    }
  },
  created() {
    //判断当前是否有网络
    if (!navigator.onLine) {
      this.$message({
        message: '当前无法连接到服务器，请检查网络',
        type: 'warning',
      })
    }

    // this.getDeptList();
    // this.getCategory();
    // var lett = this;
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode;
    //   if (key == 13) {
    //     lett.submit("form");
    //   }
    // };
  },
  methods: {
    setUnitId(v) {
      this.temp.deptId = v || ''
    },

    login() {
      const news = this.$router.resolve({ name: 'login' })
      window.open(news.href, '_blank')
    },
    resetForm(form) {
      this.$router.go(-1)
    },
    //注册按钮提交
    register(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.accountAali != 1) {
            this.$message({
              message: '请输入账号',
              type: 'warning',
            })
            return
          }
          sign(this.temp).then((res) => {
            if (res.data.code == 0) {
              // this.$message.success('已注册，请等待管理员审核')
              this.$message.success('注册成功')
              // this.$router.push({ name: 'index' })
              this.$router.push({ name: 'login' })
              // this.login();
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      })
    },
    handleBlur() {
      if (!this.temp.account) {
        this.accountAali = 0
        return
      }
      tbUserVali({ account: this.temp.account }).then((res) => {
        if (res.data.msg == '0') {
          this.accountAali = 1
        } else {
          this.accountAali = 2
          this.$message({
            message: '账号已存在',
            type: 'error',
          })
        }
      })
    },
    //获取时间
    getCategory() {
      tbDictDefinitionQueryConstantStrList({ code: 'SYS_QUIT_TIME' }).then(
        (res) => {
          this.time = res.data.data[0]
        },
      )
    },
    //查询部门
    getDeptList() {
      tbDeptQuery({ pid: '0' }).then((res) => {
        this.companyTableData = res.data.data
      })
    },
    // 选中上一级单位
    handleNodeClickDep(val) {
      this.treeName = val.name
      this.treeFlag = false
      this.temp.deptId = val.id
    },
  },
}
</script>
<style>
.register-form .el-form-item__label,
.register-form .el-radio__label {
  color: #000;
}

.login-wrap .el-button--default {
  width: 195px;
}
.login-wrap .el-button--default.regBut {
  background: var(--colorH1);
  border-color: var(--colorH1);
  color: #ffffff;
}
.bg-login.register {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url('../../assets/login/bg02.jpg') no-repeat center;
  background-size: cover;
}
</style>
<style scoped>
.login-wrap {
  height: 100%;

  background-size: 100% 100%;
}
.login-wrap .el-select {
  width: 100%;
}
.el-card {
  background-color: rgba(255, 255, 255, 0.8);
}
.login-wrap {
  width: 100%;

  display: flex;
}
.register-form {
  width: 500px;
  margin: auto;
  padding-right: 20px;
  border: 0px;
}
.register-form .el-icon-arrow-down {
  position: absolute;
  right: 10px;
  top: 12px;
}
.login-title {
  margin-bottom: 20px;
  font-size: 36px;
  color: #f8da96;
  text-align: center;
  font-weight: normal;
  margin-top: 10px;
}
.accountHint {
  position: absolute;
  right: -30px;
  top: 0;
  font-size: 18px;
}
</style>
